<template>
	<div>
		<el-tabs v-model="activeTab" @tab-click="handleTabClick" type="border-card" style="height:calc(100vh - 280px)">
			<el-tab-pane label="入库记录" name="storage">
				<el-table :data="storageRecords" height="calc(100vh - 320px)" row-key="id" :stripe="false"
									header-cell-class-name="witheTableHeader" @expand-change="handleExpandChange">
					<el-table-column type="expand">
						<template #default="scope">
							<div m="4">
								<el-table ref="tableCil" :stripe="false" border size="small" :data="scope.row.children"
													style="width: 95%;margin-left: 20px" header-cell-class-name="blueTableHeader">
									<el-table-column type="index" width="80" align="center" label="" />
									<el-table-column label="物料名称" prop="materialName" min-width="150" align="center"
																	 show-overflow-tooltip />
									<el-table-column type label="需求数量" prop="materialCount" min-width="100" align="center"
																	 show-overflow-tooltip />
									<el-table-column label="实际入库数量" prop="actualOutCount" min-width="150" align="center"
																	 show-overflow-tooltip />
									<el-table-column label="批次号" prop="batchNo" min-width="180" align="center"
																	 show-overflow-tooltip />
									<el-table-column label="追溯码" prop="traceabilityBarcode" min-width="180" align="center"
																	 show-overflow-tooltip />
								</el-table>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="序号" align="center" type="index" width="70" />
					<el-table-column label="任务单号" prop="code" min-width="150" show-overflow-tooltip align="center" />
					<el-table-column label="业务类型" prop="businessOutType" :formatter="transferTypeFormatter" min-width="100"
													 show-overflow-tooltip align="center" />
					<el-table-column label="委外单号" prop="outsourcingNo" min-width="150" show-overflow-tooltip
													 align="center" />
					<el-table-column label="入库库位" prop="targetStorageName" min-width="150" show-overflow-tooltip
													 align="center" />
					<el-table-column label="创建时间" prop="createTime" min-width="150" show-overflow-tooltip align="center" />
					<el-table-column prop="allotStatus" align="center" min-width="80" label="单据状态"
													 :formatter="formatInStatus" />
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="出库记录" name="dispatch">
				<el-table :data="dispatchRecords" height="calc(100vh - 320px)" row-key="id" :stripe="false"
									header-cell-class-name="witheTableHeader" @expand-change="handleExpandOutChange">
					<el-table-column type="expand">
						<template #default="scope">
							<div m="4">
								<el-table ref="tableCil" :stripe="false" border size="small" :data="scope.row.children"
													style="width: 95%;margin-left: 20px" header-cell-class-name="blueTableHeader">
									<el-table-column type="index" width="80" align="center" label="" />
									<el-table-column label="物料名称" prop="materialName" min-width="150" align="center"
																	 show-overflow-tooltip />
									<el-table-column type label="需求数量" prop="materialCount" min-width="150" align="center"
																	 show-overflow-tooltip />
									<el-table-column label="实际出库数量" prop="actualOutCount" min-width="150" align="center"
																	 show-overflow-tooltip />
									<el-table-column label="批号" prop="batchNo" min-width="150" align="center" show-overflow-tooltip />
									<el-table-column label="追溯码" prop="traceabilityBarcode" min-width="180" align="center"
																	 show-overflow-tooltip />
								</el-table>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="序号" align="center" width="70" type="index" />
					<el-table-column label="任务单号" prop="code" min-width="150" show-overflow-tooltip align="center" />
					<el-table-column label="业务类型" prop="transferType" :formatter="transferTypeFormatterOut" min-width="100"
													 show-overflow-tooltip align="center" />
					<el-table-column label="委外单号" prop="outsourcingNo" min-width="150" show-overflow-tooltip align="center" />
					<el-table-column label="出库库位" prop="sourceStorageName" min-width="150" show-overflow-tooltip align="center" />
					<el-table-column label="创建时间" prop="createTime" min-width="150" show-overflow-tooltip align="center" />
					<el-table-column prop="allotStatus" align="center" min-width="80" label="单据状态" :formatter="formatInStatus" />
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="库存明细" name="inventory">
				<el-table :data="inventoryDetails" height="calc(100vh - 320px)" row-key="id" stripe="false"
									header-cell-class-name="witheTableHeader" border>
					<el-table-column label="序号" align="center" width="55" type="index" />
					<el-table-column label="批次号" prop="batchNo" min-width="200" show-overflow-tooltip align="center" />
					<el-table-column label="物料名称" prop="materialName" min-width="200" show-overflow-tooltip align="center" />
					<el-table-column label="物料编码" prop="materialNo" min-width="200" show-overflow-tooltip align="center" />
					<el-table-column label="数量" prop="count" min-width="150" show-overflow-tooltip align="center" />
					<el-table-column label="单位" prop="basicUnit" min-width="150" show-overflow-tooltip align="center" />
					<el-table-column label="物料状态" prop="materialStatus" align="center" min-width="100"
													 :formatter="formatStatus" />
					<el-table-column label="加工属性" prop="processingStatus" align="center" min-width="100"
													 :formatter="formatProcessingAttributes" />
					<el-table-column label="批次" prop="batch" min-width="150" show-overflow-tooltip align="center" />
					<el-table-column label="库位名称" prop="storageName" min-width="200" show-overflow-tooltip align="center" />
					<el-table-column label="追溯码" prop="traceabilityCode" min-width="250" show-overflow-tooltip align="center" />
					<el-table-column label="转码前追溯码" prop="preorderTraceCode" min-width="250" show-overflow-tooltip
													 align="center" />
					<el-table-column label="创建时间" prop="createTime" min-width="200" show-overflow-tooltip align="center" />
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="质检记录" name="quality">
				<el-table class="pageTableClass" :data="qualityRecords" border height="calc(100vh - 320px)"
									header-cell-class-name="witheTableHeader">
					<el-table-column label="序号" align="center" width="70" type="index" />
					<el-table-column prop="no" label="单号" align="center" min-width="200" />
					<el-table-column prop="sourceNo" label="来源单号" align="center" min-width="200" />
					<el-table-column prop="qualityType" label="质检类型" align="center" min-width="200">
						<template #default="scope">
							<span> {{ getQualityTypeByValue(scope.row.qualityType) }} </span></template>
					</el-table-column>
					<el-table-column prop="passRate" label="合格率" align="center" min-width="100">
						<template #default="scope">
							<div v-if="scope.row.passRate"> {{ scope.row.passRate }} %</div>
						</template>
					</el-table-column>
					<el-table-column prop="totalQuantity" label="质检数量" align="center" min-width="110" />
					<el-table-column prop="schemeTaskForm.qualifiedQuantity" label="合格数" align="center" min-width="100" />
					<el-table-column prop="schemeTaskForm.unQualifiedQuantity" label="不合格数" align="center"
													 min-width="100" />
					<el-table-column prop="createTime" label="创建时间" align="center" min-width="200" />
				</el-table>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessage, ElTable, ElTableColumn, ElTabPane, ElTabs } from 'element-plus';
import axiosInstance from '@/utils/http/api';

// 响应式变量，用于控制当前激活的标签页
const activeTab = ref('storage');

// 各个标签页的数据
const props = defineProps({
	preorderTraceCodeList: Array,
});


onMounted(() => {
	// getList();
});

// 假设父组件传递了 preorderTraceCodeList 属性

// 使用 watch 函数来监听 preorderTraceCodeList 的变化
watch(
	() => props.preorderTraceCodeList,
	(newValue, oldValue) => {
		console.log(oldValue);
		if (newValue !== oldValue) {
			// 当 preorderTraceCodeList 发生变化时，执行 getList 请求
			getList();
		}
	}
)

const getList = () => {
	// 入库单
	axiosInstance.post('/api/traceCode/stockIn/findByTraceCode', {
		preorderTraceCodeList: props.preorderTraceCodeList
	})
		.then(res => {
			if (res.code !== 200) {
				ElMessage.error(res.message);
				return false;
			}
			storageRecords.value = res.data;
		});

	// 出库单
	axiosInstance.post('/api/traceCode/stockOut/findByTraceCode', {
		preorderTraceCodeList: props.preorderTraceCodeList
	})
		.then(res => {
			if (res.code !== 200) {
				ElMessage.error(res.message);
				return false;
			}
			dispatchRecords.value = res.data;
		});

	// 库存明细
	axiosInstance.post('/api/traceCode/stock/findByTraceCode', {
		preorderTraceCodeList: props.preorderTraceCodeList
	})
		.then(res => {
			if (res.code !== 200) {
				ElMessage.error(res.message);
				return false;
			}
			inventoryDetails.value = res.data;
		});

	// 质检记录
	axiosInstance.post('/api/traceCode/qualitySchemeTask/findByTraceCode', {
		preorderTraceCodeList: props.preorderTraceCodeList
	})
		.then(res => {
			if (res.code !== 200) {
				ElMessage.error(res.message);
				return false;
			}
			qualityRecords.value = res.data;
		});

};


const handleExpandOutChange = (row: any, expandedRows: any[]) => {
	if (expandedRows.includes(row)) {
		rowOutChildren(row);
	} else {
		// getList();
	}
};

const rowOutChildren = (row: any) => {
	axiosInstance.post('/api/warehouseMaterialTransferOrder/getDetailById', { id: row.id }).then(res => {
		if (res.code !== 200) {
			ElMessage.warning(res.message);
			return false;
		}
		dispatchRecords.value = dispatchRecords.value.map((item) => {
			if (item.id === row.id) {
				return { ...item, children: res.data.children };
			}
			return item;
		});
	});

};

const handleExpandChange = (row: any, expandedRows: any[]) => {
	if (expandedRows.includes(row)) {
		rowChildren(row);
	} else {
		// getList();
	}
};

const rowChildren = (row: any) => {
	axiosInstance.post('/api/warehouseMaterialTransferOrder/getDetailById', { id: row.id }).then(res => {
		if (res.code !== 200) {
			ElMessage.warning(res.message);
			return false;
		}
		const traceabilityCodeList = res.data?.traceabilityCodeList || [];
		const childrenWithTraceability = res.data.warehouseMaterialTransferOrderDetailBatchList?.map(child => ({
			...child,
			traceabilityCodeList
		})) || [];

		storageRecords.value = storageRecords.value.map((item) => {
			if (item.id === row.id) {
				return { ...item, children: childrenWithTraceability };
			}
			return item;
		});
	});
};
// 处理标签页点击事件
const handleTabClick = (tab) => {
	// 这里可以执行一些逻辑，比如更新数据等
	console.log('当前激活的标签页:', tab.props.name);
};

const formatInStatus = (row, column, cellValue) => {
	switch (cellValue) {
		case 1:
			return '待处理';
		case 2:
			return '进行中';
		case 3:
			return '完结';
	}
};

const businessTypeList = ref([
	{
		name: '采购入库',
		id: 1
	}, {
		name: '销售退库',
		id: 2
	}, {
		name: '生产退库',
		id: 3
	}, {
		name: '生产入库',
		id: 4
	}, {
		name: '调拨（入）',
		id: 5
	}, {
		name: '委外入库',
		id: 6
	}, {
		name: '线边备料（入）',
		id: 7
	}
]);

const transferTypeFormatter = (row, column, cellValue) => {
	let name = null;
	businessTypeList.value.find(item => {
		if (item.id === row.businessType) {
			name = item.name;
		}
	});
	return name || '';
};

const businessTypeListOut = ref([
	{
		name: '销售出库',
		id: 1
	}, {
		name: '调拨（出）',
		id: 2
	}, {
		name: '委外出库',
		id: 3
	}, {
		name: '线边备料（出）',
		id: 4
	}, {
		name: '生产出库',
		id: 5
	}, {
		name: '生产退库（出）',
		id: 6
	}
]);

const transferTypeFormatterOut = (row, column, cellValue) => {
	let name = null;
	businessTypeListOut.value.find(item => {
		if (item.id === row.businessOutType) {
			name = item.name;
		}
	});
	return name || '';
};

const formatStatus = (row, column, cellValue) => {
	switch (cellValue) {
		case 0:
			return '不可用';
		case 1:
			return '可用';
		case 2:
			return '运输中';
		case 3:
			return '生产锁定';
		case 4:
			return '不合格';
		case 5:
			return '报废';
	}
};

const formatProcessingAttributes = (row, column, cellValue) => {
	switch (cellValue) {
		case 0:
			return '未加工';
		case 1:
			return '已加工';

	}
};

const getQualityTypeByValue = (e) => {
	let name = null;
	for (const item of qualityTypeList.value) {
		if (e == item.value) {
			name = item.label;
		}
	}
	return name;
};

const qualityTypeList = ref([
	{
		label: '首件检',
		value: '1',
		type: 'material'
	},
	{
		label: '末件检',
		value: '2',
		type: 'material'
	},
	{
		label: '生产',
		value: '3',
		type: 'material'
	},
	{
		label: '巡检',
		value: '4',
		type: 'material'
	},
	{
		label: '入库检',
		value: '5',
		type: 'procedure'
	},
	{
		label: '出库检',
		value: '6',
		type: 'procedure'
	},
	{
		label: '来料检',
		value: '7',
		type: 'procedure'
	}
	// 继续添加更多检查类型...
]);


const storageRecords = ref([]);
const dispatchRecords = ref([]);
const inventoryDetails = ref([]);
const qualityRecords = ref([]);

</script>

<style scoped>
/* 组件的样式 */
</style>
